<template>
  <basic-layout>
    <view class="cate">
      <!-- 左侧分类列表 -->
      <view class="cate-left">
        <view
          class="cate-item"
          :class="{ active: currentCate === index }"
          v-for="(item, index) in cateList"
          :key="index"
          @tap="switchCate(index)"
        >
          {{ item.name }}
        </view>
      </view>

      <!-- 右侧商品列表 -->
      <view class="cate-right">
        <view class="goods-list">
          <view
            class="goods-item"
            v-for="(item, index) in goodsList"
            :key="index"
            @tap="goToDetail(item.id)"
          >
            <image
              class="goods-img"
              :src="item.image"
              mode="aspectFill"
            ></image>
            <view class="goods-info">
              <text class="goods-name">{{ item.name }}</text>
              <text class="goods-price">¥{{ item.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </basic-layout>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { ref } from "vue";
import Taro from "@tarojs/taro";
const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";

// definePageConfig({
//   navigationBarTitleText: '分类',
//   // navigationStyle: 'custom'
// });

Taro.setNavigationBarTitle({
  title: "分类",
});
// 分类列表数据
const cateList = ref([
  { name: "报单专区" },
  { name: "精选美酒" },
  { name: "美味果酒" },
  { name: "纯正米酒" },
]);

// 当前选中的分类
const currentCate = ref(0);

// 商品列表数据
const goodsList = ref(
  [...Array(12)].map((_, i) => ({
    id: i + 1,
    name: "32度三花醇酒",
    price: Math.floor(Math.random() * 100),
    image: pic,
  }))
);

const systemInfo = Taro.getSystemInfoSync()
console.log("goodsList", goodsList.value);
console.log("systemInfo", systemInfo);
// 跳转到商品详情页
const goToDetail = (id: number) => {
  Taro.navigateTo({
    url: `/pages-detail/detail/index?id=${id}`,
  });
};

// 切换分类
const switchCate = (index: number) => {
  currentCate.value = index;
  // TODO: 根据分类加载对应商品列表
};
</script>

<style lang="scss">
.basic-layout__content {
  width: 750rpx;
}

.cate {
  width: 100%;
  height: 100vh;
  display: flex;
  background: #f8f8f8;
  box-sizing: border-box;
  padding-bottom: 100rpx;

  .cate-left {
    width: 200rpx;
    height: 100%;
    background: #eee;
    overflow-y: auto;

    .cate-item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1rpx solid #f5f5f5;

      &.active {
        color: #008000;
        background: #f8f8f8;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 8rpx;
          height: 32rpx;
          background: #008000;
        }
      }
    }
  }

  .cate-right {
    flex: 1;
    height: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    overflow-y: auto;

    .goods-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;

      .goods-item {
        background: #fff;
        border-radius: 12rpx;
        overflow: hidden;

        .goods-img {
          width: 100%;
          height: 240rpx;
        }

        .goods-info {
          padding: 16rpx;

          .goods-name {
            font-size: 28rpx;
            color: #333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .goods-price {
            font-size: 32rpx;
            color: #ff0000;
            margin-top: 8rpx;
          }
        }
      }
    }
  }
}
</style>
